<script setup>
import "./index.scss"
import SelectCountry from "@/components/Selects/SelectCountry"
const props = defineProps({
  formData: Object,
})
const SelectCountryRef = ref({})
const countryItems = computed(() => {
  const list = SelectCountryRef.value.optionsList || []
  const countryList = props.formData.receiving_country
  return countryList.reduce((pre, cur) => {
    const _find = list.find((v) => v.country === cur)
    pre.push({
      label: `${_find.name}${cur}`,
      value: cur,
    })
    return pre
  }, [])
})

const handleDelCountry = (value, deleteType) => {
  if (deleteType === 1) {
    const _findIndex = props.formData.receiving_country.findIndex((v) => v === value)
    props.formData.receiving_country.splice(_findIndex, 1)
  } else {
    props.formData.receiving_country = []
  }
}

//添加邮编
const addPostcode = (arr) => {
  arr.push(["", ""])
}
//删除邮编
const delPostcode = (arr, index) => {
  arr.splice(index, 1)
}
const handleClear = (key) => {
  props.formData[key] = ""
}
</script>

<template>
  <el-form-item label="收货国家：">
    <SelectCountry multiple collapse-tags clearable :value-key="'country'" class="w-[320px]" ref="SelectCountryRef" v-model="formData.receiving_country" labelKey2="true" />
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="item in countryItems" :key="item.value">
        <span>{{ item.label }}</span>
        <svg-icon icon-class="del" @click="() => handleDelCountry(item.value, 1)" />
      </div>
    </div>
    <el-link v-show="countryItems.length" type="danger" class="ml-2" :underline="false" @click="handleDelCountry">清除</el-link>
  </el-form-item>
  <el-form-item label="州/省：">
    <el-input v-model="formData.receiving_province" style="width: 600px" type="textarea" :rows="5" placeholder="请填写，一行一个" />
    <el-link v-show="formData.receiving_province" @click="handleClear('receiving_province')" type="danger" class="ml-2" :underline="false">清除</el-link>
  </el-form-item>
  <el-form-item label="城市：">
    <el-input v-model="formData.receiving_city" style="width: 600px" type="textarea" :rows="5" placeholder="请填写，一行一个" />
    <el-link v-show="formData.receiving_city" @click="handleClear('receiving_city')" type="danger" class="ml-2" :underline="false">清除</el-link>
  </el-form-item>
  <el-form-item label="详细地址关键词：">
    <el-input v-model="formData.address_keys" style="width: 600px" type="textarea" :rows="5" placeholder="请填写，一行一个" />
    <el-link v-show="formData.address_keys" @click="handleClear('address_keys')" type="danger" class="ml-2" :underline="false">清除</el-link>
  </el-form-item>
  <el-form-item label="邮编（包含）：" class="postcode">
    <div v-for="(item, index) in formData.in_zip_code" class="w100 mb-2" :key="index">
      <el-input v-model="item[0]" placeholder="前缀" style="width: 190px" />
      <span class="ml-4 mr-4">--任意字符--</span>
      <el-input v-model="item[1]" placeholder="后缀" style="width: 190px" />
      <el-button size="small" class="ml-2" @click="addPostcode(formData.in_zip_code)" circle>
        <div class="dk-iconfont icon-Plus"></div>
      </el-button>
      <el-button size="small" v-if="formData.in_zip_code.length > 1" @click="delPostcode(formData.in_zip_code, index)" circle>
        <div class="dk-iconfont icon-Minus"></div>
      </el-button>
    </div>
  </el-form-item>
  <el-form-item label="邮编（不包含）：" class="postcode">
    <div v-for="(item, index) in formData.ex_zip_code" class="w100 mb-2" :key="index">
      <el-input v-model="item[0]" placeholder="前缀" style="width: 190px" />
      <span class="ml-4 mr-4">--任意字符--</span>
      <el-input v-model="item[1]" placeholder="后缀" style="width: 190px" />
      <el-button size="small" class="ml-2" @click="addPostcode(formData.ex_zip_code)" circle>
        <div class="dk-iconfont icon-Plus"></div>
      </el-button>
      <el-button size="small" v-if="formData.ex_zip_code.length > 1" @click="delPostcode(formData.ex_zip_code, index)" circle>
        <div class="dk-iconfont icon-Minus"></div>
      </el-button>
    </div>
  </el-form-item>
</template>

<style scoped lang="scss"></style>
